<template>
	<view>
		<uni-list id="news_list" loadmoreoffset="10rpx">
			<uni-list-item v-for="(item, index) in rankings" 
			:key="index" :title="item.title" :show-badge="true"
			:badge-text="index + 1" :badge-type="index == 0 ? 'error' : index == 1 ? 'success' : index == 2 ? 'primary' : 'default'"></uni-list-item>
		</uni-list>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	
var _self,
	page = 1,
	timer = null;
export default {
	data() {
		return {
			status: 'more',			
			rankings: [],
			test: {
				color: '#4cd964'
			}
		};
	},
	onLoad() {	// 页面加载监听
		_self = this;	// 保存vue实例
		_self.getNewList();	// 获取一页新闻实例
	},
	methods: {
		// 获取新的一页数据
		getNewList: function() {
			page = 1;
			_self.status = 'loading';
			var test = {
				title: 'wxxy',
			};
			var result = [];
			for (var i = 0; i < 20; i++) result.push(test);
			_self.rankings = result;
			_self.status = 'more';
		},
		getMoreNews: function() {
			page++;
			if (page >= 3) {
				_self.status = 'noMore';
				return;
			}
			_self.status = 'more';
			var test = {
				title: 'wxxy',
			};
			var result = [];
			for (var i = 0; i < 20; i++) result.push(test);
			_self.rankings = _self.rankings.concat(result);
		}
	},
	components: { uniList, uniListItem, uniLoadMore },
	onPullDownRefresh() {	// 下拉刷新
		_self.getNewList();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	},
	onReachBottom: function() {	// 监听是否滑倒页面底部，滑到就去加载新的一页新闻列表
		if (timer != null) {
			clearTimeout(timer);
		}
		_self.status = 'loading';
		timer = setTimeout(function() {
			_self.getMoreNews();
		}, 1000);
	},
	computed: {
	}
};
</script>

<style></style>
